<template>
		<div class="upload-container"
		     @click="clickHandler"
		>
			<input type="file"
			       class="hide-node"
			       :accept="accept"
			       ref="fileRef"
			       @change="onChange"
			/>
			<img :src="imgSrc"
			     v-if="showImg"
			     class="image-preview"
			     alt=""/>
			<el-icon class="icon-plus"
			         v-if="!showImg"
			>
				<plus/>
			</el-icon>
		</div>
</template>

<script setup>
import {ref, computed} from 'vue'
import {Plus} from '@element-plus/icons-vue'

const props = defineProps({
	accept: {
		type: String,
		default: 'image/jpeg,image/png,image/jpg'
	},
	imgSrc: {
		type: String,
	},
	validate: {
		type: Boolean,
	}

})
const showImg = computed(() => {
	return !!props.imgSrc;

})
const emits = defineEmits(['uploadFile'])
const fileRef = ref(null)
const clickHandler = () => {
	if (!fileRef.value) {
		throw new Error('input is not mounted')
	}
	fileRef.value.value = null
	fileRef.value.click()
}

const onChange = (ev) => {
	const [file] = ev.target.files
	emits('uploadFile', file)
}
</script>

<style scoped lang="scss">
	.upload-container {
		border: 1px dashed #dcdfe6;
		border-radius: 6px;
		cursor: pointer;
		transition: border .2s;
		width: 180px;
		height: 180px;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		background: #fff;
		z-index: 1;

		.image-preview {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

		.icon-plus {
			font-size: 30px;
			color: #8c939d;
			transition: color .2s;
		}

		&:hover {
			border-color: #409eff;

			.icon-plus {
				color: #409eff;
			}
		}

		.hide-node {
			display: none;
			position: fixed;
		}
}
</style>